<template>
    <div class="hello">
        <span class="test">hello组件内部</span>
        <Brother1></Brother1>
        <button @click="changeprops">修改props值{{ current }}</button>
    </div>
</template>

<script>
import Brother1 from '@/components/brother1.vue';

export default {
    name: 'HelloWorld',
    components: { Brother1 },
    props: {
        msg: String,
        current: {
            type: [String, Number],
            default: '2134214334'
        }
    },
    methods: {
        aletmsg() {
            // alert(1111);
            // console.log(this.$parent);
        },
        changeprops() {
            // this.current = '2354235';
            this.$emit('update:current', '2354235');
        }
    },
    created() {
        console.log('我是子组件created');
    },
    mounted() {
        console.log('我是子组件mounted');
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
.hello {
    border: 5px solid blue;
}
</style>
